<!-- <template>
	<view class="contaier">
		<u-navbar back-text="" title="" :is-back="false">
			<view class="slot-wrap">
				<view class="symbol" ><u-icon size="30" name="arrow-leftward" style="margin-right: 25rpx;" @click="onBack()"></u-icon><text class="label" @click="showSymbol = true">{{currentMarket.baseCoin}}/{{currentMarket.pricingCoin}}<u-icon size="30" name="list-dot" style="margin-left: 10rpx;"></u-icon></text></view>
				<view class="position" @click="navTo('/pages/option/list')"><text class="label">{{i18n.option.position}}</text><u-icon name="order"></u-icon></view>
			</view>
		</u-navbar>
		<view class="tick">
			<view class="left">
				<view class="price" :class="{upText: (tick != undefined && tick.change >= 0),downText: (tick != undefined && tick.change < 0)}">{{tick != undefined ? tick.close : 0.00}}</view>
				<view class="detail">
					<text class="rise" :class="{upText: (tick != undefined && tick.change >= 0),downText: (tick != undefined && tick.change < 0)}">{{tick != undefined ? tick.change : 0.00}}%</text>
				</view>
			</view>
			<view class="right">
				<view class="b">
					<view class="col title">
						<text class="t">{{i18n.market.high}}</text>
						<text class="t">{{i18n.market.low}}</text>
						<text class="t">24H</text>
					</view>
					<view class="col">
						<text>{{tick.high}}</text>
						<text>{{tick.low}}</text>
						<text>{{tick.vol | formatD}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<kline-chart ref="klineChart" :width="'100%'" :height="800" :symbol="Symbol" :lang="lang" />
		
		<view class="trade">
			<button @click="onTrade('bull')" class="trade-btn upBg">{{i18n.option.sideMap.bull}}</button>
			<button @click="onTrade('bear')" class="trade-btn downBg">{{i18n.option.sideMap.bear}}</button>
		</view>
		
		<u-popup v-model="showSymbol" mode="left">
			<view class="popup-symbol">
				<view class="title little-line">{{i18n.option.title}}</view>
				<scroll-view :scroll-y="true" class="scroll-Y">
					<view @click="onChangeSymbol(item)" class="cell little-line" v-for="(item, index) in markets" :key="`market${index}`">
						<view class="cell-item">{{item.baseCoin}}/{{item.pricingCoin}}</view>
						<view class="cell-item upText" :class="{upText: (item.close > item.open),downText: (item.close < item.open)}">{{item.close}}</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-popup v-model="showTrade" mode="bottom" :closeable="true" z-index="1000">
			<view class="popup-trade">
				<view class="title little-line">{{currentMarket.baseCoin}}/{{currentMarket.pricingCoin}}</view>
				<view class="row">
					<view class="label">{{i18n.option.name}}</view>
					<view class="value">{{currentMarket.baseCoin}}</view>
				</view>
				<view class="row">
					<view class="label">{{i18n.option.side}}</view>
					<view class="value" :class="{upText: (form.tradeSide == 'bull'),downText: (form.tradeSide == 'bear')}">{{sideMap[form.tradeSide]}}</view>
				</view>
				<view class="row">
					<view class="label">{{i18n.option.price}}</view>
					<view class="value">{{tick != undefined ? tick.close : 0.00}}</view>
				</view>
				<view class="col">
					<view class="label">{{i18n.option.xzdqsj}} </view>
					<view class="value">
						<view class="item" v-for="(v, k) in currentMarket.periodMap" @click="form.period = k">
							<view class="time" :class="{'current': k == form.period}">{{k}}{{i18n.option.second}}</view>
							<view class="ratio">{{(v * 100) | fixed(2)}}%</view>
						</view>
					</view>
				</view>
				<view class="col">
					<view class="label">{{i18n.option.mrsl}}</view>
					<view class="value">
						<u-input maxlength="12" v-model="form.volume" type="number" :placeholder="i18n.option.srmrsl" :custom-style="{'color': '#ffffff'}" :border="true" />
					</view>
				</view>
				<view class="col">
					<view class="label">{{i18n.option.kyye}}: {{account.normalBalance | fixD(account.showPrecision)}} {{account.symbol}}</view>
				</view>
				<view class="col">
					<u-button @click="onTradeSubmit" type="primary">{{i18n.common.ok}}</u-button>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import KlineChart from '@/components/klinechart/kline-chart.vue'
	import {commonMixin} from '@/common/mixin/mixin.js'
	export default {
		name: 'HQChart',
		components: {
			KlineChart
		},
		mixins: [commonMixin],
		data() {
			let data = {
				showSymbol: false,
				showTrade: false,
				background: {
					backgroundColor: '#101725',
				},
				showSet: false,
				title: '',
				Symbol: '',
				lang: 'zh-CN',
				intro: {},
				currentMarket: {},
				markets: [],
				marketTimer: null,
				account: {},
				sideMap: {
					'bull': '买涨',
					'bear': '买跌'
				},
				tick: {},
				form: {
					marketId: null,
					volume: null,
					tradeSide: null,
					period: null
				}
			}

			return data;
		},
		computed: {
		},
		watch: {
			currentMarket: {
				handler(newV, oldV) {
					if(newV && oldV){
						this.loadAccount()
					}
				},
				immediate: true,
				deep: true
			}
		},
		onLoad(options) {
			let that = this
			if(options.symbol){
				this.Symbol = options.symbol
			}
			//this.Symbol = 'ethusdt'
			//this.syncSubRealtimeKline()
			uni.setNavigationBarTitle({
				title: this.Symbol.toUpperCase()
			})
		},
		//隐藏的时候 停止定时器和清空hqchart的实例
		onHide() {
			
			this.syncCancelRealtimeKline();
			//this.syncCancelMarketTicker();
			this.syncCancelMarketDetail();
			if(this.marketTimer){
				clearInterval(this.marketTimer)
			}
		},
		//退出的时候 停止定时器和清空hqchart的实例
		onUnload() {
			this.syncCancelRealtimeKline();
			//this.syncCancelMarketTicker();
			this.syncCancelMarketDetail();
			if(this.marketTimer){
				clearInterval(this.marketTimer)
			}
		},
		onShow() {
			this.sideMap = this.i18n.option.sideMap
			
			this.init()
		},

		methods: {
			...mapActions('option', ['optionMarketList', 'createOptionOrder']),
			...mapActions('account', ['getAccount']),
			onChangeSymbol(item){
				this.syncCancelRealtimeKline();
				//this.syncCancelMarketTicker();
				this.syncCancelMarketDetail();
				
				if(this.marketTimer){
					clearInterval(this.marketTimer)
				}
				this.currentMarket = item
				this.Symbol = this.currentMarket.symbol.toLowerCase()
				this.tick = {}
				this.syncSubMarketDetail()
				this.showSymbol = false
			},
			getMarketList(){
				this.optionMarketList().then(res => {
					this.markets = res.data
				})
			},
			loadAccount(){
				this.getAccount(this.currentMarket.betCoin).then(res =>{
					this.account = res.data
				})
			},
			onTrade(side){
				this.resetForm()
				this.form.marketId = this.currentMarket.marketId
				this.form.tradeSide = side
				for(let key in this.currentMarket.periodMap){
					if(this.form.period){
						break;
					}
					this.form.period = key
				}
				this.showTrade = true
			},
			onTradeSubmit(){
				let that = this
				if(!this.form.volume){
					this.$api.msg(this.i18n.option.srmrsl)
					return;
				}
				if(this.currentMarket.minAmount && this.form.volume < this.currentMarket.minAmount){
					this.$api.msg(this.i18nParse(this.i18n.option.tips.zxsl, [this.currentMarket.minAmount]))
					return;
				}
				if(this.currentMarket.maxAmount && this.form.volume > this.currentMarket.maxAmount){
					this.$api.msg(this.i18nParse(this.i18n.option.tips.zdsl, [this.currentMarket.maxAmount]))
					return;
				}
				uni.showModal({
				    title: this.i18n.common.tip,
				    content: this.i18n.popup.submittext,
					confirmText: this.i18n.common.ok,
					cancelText: this.i18n.common.cancel,
				    success: function (res) {
				        if (res.confirm) {
				            that.createOptionOrder(that.form).then(res => {
				            	that.$api.msg(that.i18n.option.tips.xdcg)
								that.showTrade = false
				            })
				        }
				    }
				});
			},
			resetForm(){
				this.form = {
					marketId: null,
					volume: null,
					tradeSide: null,
					period: null
				}
			},
			async init(){
				let that = this
				let res = await this.optionMarketList();
				this.tick = {
					open: 0,
					close: 0,
					low: 0,
					high: 0,
					vol: 0,
					amount: 0,
					change: 0
				}
				if(res.data && res.data.length > 0){
					this.markets = res.data
					if(this.Symbol){
						this.currentMarket = this.markets.filter(item => item.symbol == this.Symbol)[0]
					} else {
						this.currentMarket = this.markets[0]
						this.Symbol = this.currentMarket.symbol.toLowerCase()
					}
					
					setTimeout(() => {
						that.syncSubMarketDetail()
					}, 1000)
				}
				this.marketTimer = setInterval(() => {
					that.getMarketList()
				}, 3000)
			},
			
			capture() {
				var pages = getCurrentPages();
				var page = pages[pages.length - 1];
				var bitmap = null;
				var currentWebview = page.$getAppWebview();
				bitmap = new plus.nativeObj.Bitmap('amway_img');
				// 将webview内容绘制到Bitmap对象中  
				currentWebview.draw(bitmap, function() {
					bitmap.save("_doc/a.jpg", {}, function(i) {
						uni.saveImageToPhotosAlbum({
							filePath: i.target,
							success: function() {
								bitmap.clear(); //销毁Bitmap图片  
								uni.showToast({
									title: '保存成功’',
									mask: false,
									duration: 1500
								});
							}
						});
					}, function(e) {
						console.log('保存图片失败：' + JSON.stringify(e));
					});
				}, function(e) {
					console.log('截屏绘制图片失败：' + JSON.stringify(e));
				});
				//currentWebview.append(amway_bit);    
			},
			syncSubRealtimeKline() {
				let that = this
				let ch = `market.${this.Symbol}.kline.${this.defaultPeriod}`
				let params = {
				  "id": new Date().getTime(),
				  "sub": ch,
				}
				this.$store.dispatch('TIO_SEND', JSON.stringify(params))
				uni.$on("sub."+ch, (res) => {
					if (this.chartPeriod[this.defaultPeriod] > 3) {
						that.RecvMinuteRealtimeData(res.data, ch)
					} else {
						that.RecvRealtimeData(res.data, ch)
					}
				})
			},
			syncCancelRealtimeKline() {
				let ch = `market.${this.Symbol}.kline.${this.defaultPeriod}`
				let params = {
				  "id": new Date().getTime(),
				  "unsub": ch,
				}
				this.$store.dispatch('TIO_SEND', JSON.stringify(params))
			},
			syncCancelMarketDetail(){
				let ch = `market.${this.Symbol}.detail`
				let params = {
				  "id": new Date().getTime(),
				  "unsub": ch,
				}
				this.$store.dispatch('TIO_SEND', JSON.stringify(params))
			},
			syncSubMarketDetail(){
				let that = this
				let ch = `market.${this.Symbol}.detail`
				let params = {
				  "id": new Date().getTime(),
				  "sub": ch,
				}
				this.$store.dispatch('TIO_SEND', JSON.stringify(params))
				uni.$on("sub."+ch, (res) => {
					let tick = res.data.tick
					tick.change = parseFloat((tick.close - tick.open) / tick.open * 100).toFixed(2);
					tick.cny = parseFloat(tick.close * 6.4).toFixed(2)
					this.tick = tick
				})
			},
		}
	}
</script>

<style lang="scss">
	$upColor: rgb(37,175,142);
	$downColor: rgb(210,73,99);
	$mainBgColor: #101725;
	.upText{
		color: $upColor;
	}
	.downText{
		color: $downColor;
	}
	.upBg{
		background-color: $upColor;
	}
	.downBg{
		background-color: $downColor;
	}
	.klineId {
		.u-tab-bar {
			font-weight: none;
		}
	}
	.trade{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		display: flex;
		padding: 10rpx 0;
		.trade-btn{
			width: 45%;
			border: 0rpx !important;
			color: #ffffff;
			font-size: 30rpx;
		}
	}
	.popup-trade{
		height: 760rpx;
		color: #000000;
		overflow: hidden;
		.title{
			font-size: 30rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx;
		}
		.row{
			display: flex;
			justify-content: space-between;
			padding: 10rpx 20rpx;
		}
		.col{
			padding: 10rpx 20rpx;
			.label{
				padding-bottom: 10rpx;
			}
			.value{
				display: flex;
				justify-content: space-between;
				.item{
					width: 24%;
					text-align: center;
					border: 1rpx solid #2979ff;
					border-radius: 10rpx;
					font-size: 24rpx;
					.current{
						background-color: #2979ff;
					}
					.time{
						border-bottom: 1rpx solid #2979ff;
						padding: 4rpx 0;
					}
					.ratio{
						padding: 4rpx 0;
					}
				}
			}
		}
	}
	.scroll-Y{
		height: 100%;
		padding-bottom: 30rpx;
	}
	.popup-symbol{
		background-color: $mainBgColor;
		width: 460rpx;
		height: 100%;
		overflow: hidden;
		.title{
			font-size: 34rpx;
			font-weight: bold;
			color: #ffffff;
			display: flex;
			align-items: center;
			padding: 0rpx 20rpx;
			height: 100rpx;
		}
		.cell{
			width: 100%;
			color: #ffffff;
			display: flex;
			justify-content: space-between;
			padding: 20rpx 20rpx;
			.cell-item{
			}
		}
	}
	.solt-right {
		display: flex;
		align-items: center;

		.u-icon {
			margin-right: 20rpx;
		}
	}

	.contaier {
		padding-bottom: 140rpx;
	}
	.slot-wrap{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #000000;
		padding: 0 30rpx;
		.symbol{
			font-size: 34rpx;
			font-weight: bold;
			.label{
				margin-right: 20rpx;
			}
		}
		.position{
			font-size: 28rpx;
			font-weight: bold;
			.label{
				margin-right: 10rpx;
			}
		}
	}
	.slot-content{
		
	}
	.setting {
		position: absolute;
		left: 0;
		top: 74upx;
		background-color: rgb(9, 17, 25);
		padding: 20upx 20upx 60upx 20upx;
		width: 100%;
		z-index: 9999999;
		.row {
			.title {
				display: block;
				font-size: $font-base;
				padding-bottom: 20upx;
				color: #ffffff;
				padding-top: 20upx;
			}

			.items {
				display: flex;
				flex-direction: row;

				.item {
					padding: 10upx 20upx;
					background-color: rgb(17, 30, 50);
					margin-right: 20upx;
					color: rgb(88, 116, 152);
					font-size: 24rpx;
					border: 2rpx solid transparent;
				}

				.active {
					border: 2upx solid rgb(41, 121, 255);
				}
			}
		}
	}

	.tick {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 30rpx 30rpx;
	
		.left {
			flex: 1;
			.price {
				font-size: $font-xxl;
				font-weight: bold;
			}
			.detail {
				display: block;
				color: rgb(88, 116, 152);
				font-size: $font-sm;
				padding-top: 10upx;
				.rise {
					margin-left: 20upx;
				}
			}
		}
	
		.right {
			flex: 1;
			display: flex;
			.b {
				justify-content: right;
				width: 100%;
				display: flex;
				.col {
					flex: 5;
					display: flex;
					flex-direction: column;
					justify-content: center;
					text-align: right;
				}
				.title {
					flex: 7;
					width: 60rpx;
					text-align: right;
					.t {
						color: rgb(88, 116, 152);
					}
				}
			}
		}
	}

	.tools {
		display: flex;
		flex-direction: row;
		position: relative;
		width: 100%;
		.period {
			flex: 1;
		}

		.flexBox {
			width: 180rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			position: relative;
			color: rgb(88, 116, 152);
			.more{
				
			}
			.dept {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #587498;
			}

			.dropdown {
				// flex: 1;
			}
		}

	}
</style -->>
